<script setup lang="ts">
import type { PropType } from 'vue';
import { computed, defineEmits, defineProps, ref, watch } from 'vue';
import BaseImage from '~/components/BaseImage.vue';
import { useDialogSelectCurrency } from '~/dialogs/useDialogSelectCurrency';
import arrowDown from '/images/webp/affiliate-program/arrow-down.webp';
const { openDialogSelectCurrency } = useDialogSelectCurrency()

interface OptionItem {
  label: string
  value: string
}

const props = defineProps({
  options: {
    type: Array as PropType<OptionItem[]>,
    required: true
  },
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  dateRange: String
})

const emit = defineEmits(['update:modelValue', 'update:dateRange'])

const showSelect = ref(false)
const dateRange = ref('2024/12/18 - 2024/12/25')

const openSelect = () => {
  showSelect.value = true
}

const close = () => {
  showSelect.value = false
}

const selectOption = (val: string) => {
  if (val === 'trade-date') {
    emit('update:modelValue', val)
    return
  } else if(val === 'crypto'){
    emit('update:modelValue', val)
    openDialogSelectCurrency()
    return
  } else {
    emit('update:modelValue', val)
    showSelect.value = false
  }
}

const localDateRange = ref(props.dateRange || '')
watch(() => props.dateRange, (val) => {
  localDateRange.value = val || ''
})
const onDateRangeChange = (val: string) => {
  localDateRange.value = val
  emit('update:dateRange', val)

}

const selectedLabel = computed(() => {
  if (props.modelValue === 'trade-date' && localDateRange.value) {
    return localDateRange.value
  }
  const found = props.options.find(opt => opt.value === props.modelValue)
  return found ? found.label : props.placeholder
})
</script>

<template>
  <div class="app-select">
    <!-- 选择器触发按钮 -->
    <div class="select-trigger" @click="openSelect">
      <span class="select-trigger-text" :style="{ 
        fontSize: selectedLabel.length > 20 ? '12px' : '14px',
        letterSpacing: selectedLabel.length > 20 ? '-0.8px' : '-0.3px'
      }">{{ selectedLabel }}</span>
      <div class="arrow-icon">
        <BaseImage width="12px" :url="arrowDown" />
      </div>
    </div>
    <!-- 选择器弹出层 -->
    <div v-if="showSelect" class="modal-mask" @click="showSelect = false">
      <div class="modal-container" @click.stop>
        <div class="modal-header">
          <div class="modal-title">{{ placeholder }}</div>
          <div class="modal-close" @click="close">
            <i class="icon-close" />
          </div>
        </div>
        <div class="modal-content">
          <div class="choose-option" v-for="option in options" :key="option.value" @click="selectOption(option.value)" :class="{ active: modelValue === option.value }" >
            <template v-if="option.value === 'trade-date'">
              <AppDatePicker v-model:date-range-value="dateRange" :trade-date="true" @update:date-range-value="onDateRangeChange"/>
            </template>
            <template v-else>
              <span class="choose-option-text">{{ option.label }}</span>
            </template>
            <span class="choose-radio" :class="{ active: modelValue === option.value }">
              <span class="choose-radio-inner"></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.app-select {

}
.select-trigger {
  border-radius: 4px;
  border: 1px solid #3A4142;
  background: #292D2E;
  display: flex;
  height: 40px;
  padding: 0px 12px;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
} 

.select-trigger-text {
  color: #ffffff;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px; /* 157.143% */
  white-space: nowrap;
}
.arrow-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3a4142;
  border-radius: 4px;
}

.icon-close {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
}


.modal-mask {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
}
.modal-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px 16px 0px 0px;
  background: #232626;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  padding: 8px 14px 16px 14px;
  color: #fff;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.modal-title {
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 590;
    line-height: 22px; /* 157.143% */
  text-align: center;
  flex: 1;
}
.modal-close {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #4A5354;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    font-size: 20px;
    font-style: normal;
    flex-shrink: 0;
}

.icon-close {
  width: 12px;
  height: 12px;
  display: inline-block;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #3a4142;
  border-radius: 50%;
  padding: 8px;
}

.modal-content {
  display: flex;
  flex-direction: column;
}
.choose-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.choose-option.active {
    border-radius: 4px;
    background: #323738;
}
.choose-option-text {
    color: #ffffff;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px; /* 157.143% */
}
.choose-radio {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #3B4041;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.choose-radio.active {
  border: 1px solid #24ee89;
  background: #24ee89;
}

.active .choose-radio-inner{
    width: 10px;
    height: 10px;
    background: #3B4041;
    border-radius: 50%;
}
.choose-radio.active::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background: transparent;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

</style>